<template>
  <el-drawer title="查看详情" :visible.sync="drawerVisible" :size="'600px'" custom-class="data-element-drawer">
    <div class="drawer-body">
      <pre v-loading="submitLoading">{{model || ''}}</pre>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">关闭</el-button>
    </div>
  </el-drawer>
</template>
<script>
  import { getNorthboundDataCacheById } from "@/api/northbound";

  export default {
    props: {},
    data() {
      return {
        submitLoading: false,
        drawerVisible: false,
        model: {}
      };
    },
    computed: {},
    watch: {},
    mounted() {
    },
    methods: {
      show(id) {
        this.resetModal();
        this.getNorthboundDataCacheById(id);
        this.drawerVisible = true;
      },
      getNorthboundDataCacheById(id) {
        this.submitLoading = true;
        getNorthboundDataCacheById(id).then(result => {
          this.model = result;
          this.submitLoading = false;
        });
      },
      resetModal() {
        this.model = {};
      },
      close() {
        this.drawerVisible = false;
      }
    }
  };
</script>

<style lang="scss">
  .data-element-drawer {
    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .drawer-body {
      padding: 0 30px;
      flex: 1;
      overflow: auto;
      padding-bottom: 56px;
    }

    .drawer-footer {
      padding: 10px;
      background-color: #eef1f6;
      text-align: right;

      button {
        min-width: 100px;
      }
    }
  }

</style>
<style lang="scss" scoped>
  pre{
    padding: 20px;
    background-color: #f7f7f7;
    font-size: 12px;
  }
</style>
